<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="名称">
              <a-input placeholder="请输入流程名称" v-model="queryParam.workflowName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="创建人">
              <j-dict-select-tag v-model="queryParam.createBy" placeholder="请选择创建人"
                                 dictCode="sys_user,realname,id"/>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="8">
              <a-form-item label="适用部门">
                <j-tree-select
                  v-model="queryParam.depart"
                  placeholder="请选择部门"
                  dict="sys_depart,depart_name,id"
                  pidField="parent_id">
                </j-tree-select>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="16">
              <a-form-item label="提交时间">
                <j-date showTime placeholder="请选择开始时间" v-model="queryParam.startTime"
                        date-format="YYYY-MM-DD hh:mm:ss"></j-date>
              </a-form-item>
            </a-col>
          </template>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button @click="handleAdd" type="primary" icon="plus">新建流程</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="workflowId"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
          </div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a @click="handleNode(record.workflowId)">节点配置</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.workflowId)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <flow-modal ref="flowModal" v-if="showModal" :show-modal.sync="showModal" :workflow-id="currentFlowId"
                :workflow-name="currentFlowName"
                :checked-depart-ids="currentFlowDeparts"
                @refresh="loadData"></flow-modal>
    <flow-node-modal v-if="showNodeModal" :work-flow-id="currentFlowId"
                     :show-node-modal.sync="showNodeModal"></flow-node-modal>
  </a-card>
</template>

<script>
  //工作流列表
  import {JeecgListMixin} from '@/mixins/JeecgListMixin';
  import JInput from '@/components/jeecg/JInput';
  import FlowModal from "./modules/FlowModal";
  import FlowNodeModal from "./modules/FlowNodeModal";
  import {getAction} from "../../api/manage";

  export default {
    name: "FlowList",
    mixins: [JeecgListMixin],
    components: {FlowNodeModal, FlowModal, JInput},
    data() {
      return {
        showModal: false,
        showNodeModal: false,
        currentFlowId: null,
        currentFlowName:null,
        currentFlowDeparts:null,
        url: {
          list: 'sys/workflow/list'
        },
        queryParam: {},
        columns: [
          {
            title: '流程编码',
            dataIndex: 'workflowId',
            align: "center",
          },
          {
            title: '流程名称',
            dataIndex: 'workflowName',
            align: "center",
          },
          {
            title: '适用部门',
            dataIndex: 'depart',
            align: "center",
          },
          {
            title: '创建人',
            dataIndex: 'createBy',
            align: "center",
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: "center",
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width:'170px'
          }
        ]
      }
    },
    methods: {
      //新建流程
      handleAdd() {
        this.currentFlowId = null;
        this.showModal = true;
      },
      //流程编辑
      handleEdit(record){
        this.currentFlowId = record.workflowId;
        this.currentFlowName = record.workflowName;
        if(record.departId && typeof record.departId === 'string'){
          this.currentFlowDeparts = record.departId.split(',')
        }else{
          this.currentFlowDeparts = record.departId;
        }
        this.showModal = true;
      },
      //删除流程
      handleDelete(id) {
        getAction('sys/workflow/deleteWorkFlowBase', {workflowId: id}).then(res => {
          if (res.success) {
            this.$message.success('删除成功');
            this.loadData(1)
          } else {
            this.$message.error(res.message);
          }
        }).catch(error => console.log(error))
      },
      //节点配置
      handleNode(id) {
        this.currentFlowId = id;
        this.showNodeModal = true;
      },
    }
  }
</script>

<style scoped>

</style>
